<template>
  <teleport to="#loading">
    <div class="loading d-flex">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">{{ infoText }}</span>
      </div>
      <h4>正在加载... ...</h4>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount } from 'vue';
export default defineComponent({
  name: 'loading',
  props: {
    infoText: {
      default: '加载中...',
      type: String
    }
  },
  setup() {
    const node = document.createElement('div');
    node.id = 'loading';
    document.body.appendChild(node);
    onBeforeUnmount(() => {
      console.log(node, 'mounted');
      document.body.removeChild(node);
    });
  }
});
</script>

<style lang="less" scoped>
.loading {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
